<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024-05-22 20:22:04
 * @LastEditors: toString muzi_li0323@163.com
 * @LastEditTime: 2024-06-05 10:58:56
 * @FilePath: /chain-link-api-front/src/views/myOrder/index.vue
 * @Description: 我的订单
-->
<template>
  <Header>
    <template #title>{{ t('title.Order') }}</template>
  </Header>
  <!-- 查询 -->
  <div class="searchBar">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item :label="t('order.OrderNo')" style="width: 250px; margin-bottom:0; margin-right: 20px">
        <el-input v-model.trim="queryParams.id" :placeholder="t('global.PleaseInput') + t('order.OrderNo')"
          clearable />
      </el-form-item>
      <el-form-item :label="t('order.OrderStatus')" style="width: 250px; margin-bottom: 0; margin-right: 20px">
        <el-select v-model.trim="queryParams.orderStatus"
          :placeholder="t('global.PleaseSelect') + t('order.OrderStatus')" clearable>
          <el-option v-for="(item, index) in orderStatusOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 0">
        <el-button type="primary" :icon="Search" round @click="onSubmit(queryParams.id, queryParams.orderStatus)">{{
          t('button.Search')
        }}</el-button>
        <el-button type="default" :icon="Refresh" round plain @click="onReset()">{{ t('button.Reset') }}</el-button>
      </el-form-item>
    </el-form>
  </div>


  <div class="table">
    <el-table :data="tableData" border style="width: 100%; height: 650px" size="large" v-loading="loading"
      max-height="700px">
      <el-table-column prop="amount" :label="t('table.Amount')" width="150" align="center">
        <template #default="scope">
          {{ scope.row.amount }} USDT
        </template>
      </el-table-column>
      <el-table-column prop="id" :label="t('order.OrderNo')" width="400" align="center"></el-table-column>
      <el-table-column prop="payOrderTime" :label="t('order.PayOrderTime')" width="auto" align="center">
        <template #default="scope">
          {{ formatTimestamp(scope.row.payOrderTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="maturityTime" :label="t('table.MaturityTime')" width="auto" align="center">
        <template #default="scope">
          {{ formatTimestamp(scope.row.maturityTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="orderStatus" :label="t('order.OrderStatus')" width="200" align="center">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.orderStatus)">
            {{ formatPaymentStatus(scope.row.orderStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="productName" :label="t('order.ProductName')" width="150" align="center">
        <template #default="scope">
          {{ scope.row.productName }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="t('global.Operation')" width="150" align="center">
        <template #default="scope">
          <el-button link type="danger" size="small"
            :disabled="scope.row.orderStatus === 2 || scope.row.orderStatus === 3 || scope.row.orderStatus === 4"
            @click="cancel(scope)">
            {{ t('order.CancelOrder') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="page">
    <el-pagination v-model:current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

</template>

<script setup>
import { ref, onMounted, unref, reactive } from 'vue'
import { useI18n } from 'vue-i18n';
import { ElMessage, ElPagination } from "element-plus";
import { Search, Refresh } from '@element-plus/icons-vue'
import { formatTimestamp } from "../../utils/timeStamp.js";
import Header from '@/views/layout/header.vue';
import { getOrderList, cancelOrder, confirmPayOrder } from '../../require/api'


const { t } = useI18n();
// 在组件被挂载后执行
onMounted(() => {
  getList()

});
const pageSize = ref(10)
const pageIndex = ref(1)
const total = ref(0)
const tableData = ref([])
// 查询参数
const queryParams = reactive([
  {
    id: '',
    orderStatus: ''
  }
])

const loading = ref(false)
const orderNo = ref(null)


// 订单状态 label
const orderStatusOptions = reactive([
  { value: 1, label: t('order.PaymentStatus1') },
  { value: 2, label: t('order.PaymentStatus2') },
  { value: 3, label: t('order.PaymentStatus3') },
  { value: 4, label: t('order.PaymentStatus4') },
  { value: 5, label: t('order.PaymentStatus5') },
])


// 获取订单列表
async function getList(id, orderStatus) {
  try {
    loading.value = true
    const { code, data, msg } = await getOrderList({
      pageIndex: pageIndex.value,
      pageSize: unref(pageSize),
      orderId: id ? id : '',
      orderStatus: orderStatus ? orderStatus : '',
    })
    if (code === 200) {
      tableData.value = data.list
      total.value = data.total
      orderNo.value = data.list[0].orderNo
      // funConfirmPayOrder(orderNo.value) //调用 funConfirmPayOrder 方法 判断订单状态
    } else {
      ElMessage.error(msg)
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false
  }
}
// // 支付完成 方法 
// async function funConfirmPayOrder(orderNo) {
//   const { code, data, msg } = await confirmPayOrder({ id: orderNo })
//   if (code === 200) {
//     console.log('确认支付成功');
//     // ElMessage.success(t('message.PaySuccess'))
//   } else {
//     ElMessage.error(msg)
//   }
// }

// 取消订单
async function cancel(scope) {
  try {
    const { code, msg } = await cancelOrder({
      id: scope.row.id
    })
    if (code === 200) {
      ElMessage.success(t('message.OrderCancelSuccess'))
    } else {
      ElMessage.error(msg)
    }
  } catch (error) {
    console.log(error);
  } finally {
    await getList();
  }
}

// 支付状态
function formatPaymentStatus(orderStatus) {
  switch (orderStatus) {
    case 1:
      return t('order.PaymentStatus1');
    case 2:
      return t('order.PaymentStatus2');
    case 3:
      return t('order.PaymentStatus3');
    case 4:
      return t('order.PaymentStatus4');
    case 5:
      return t('order.PaymentStatus5');
    default:
      return t('order.PaymentStatusOther');
  }
}

// 根据订单状态返回对应的el-tag类型
const getStatusTagType = (status) => {
  switch (status) {
    case 1:
      return 'warning'; // 待支付
    case 2:
      return 'success'; // 支付成功
    case 3:
      return 'danger'; // 支付失败
    case 4:
      return 'info'; // 取消订单
    case 5:
      return 'primary'; // 等待确认
    default:
      return 'default'; // 默认状态
  }
};

// 搜索方法
const onSubmit = (id, orderStatus) => {
  // 查询时把 pageIndex 重置为1
  pageIndex.value = 1
  getList(id, orderStatus);
}
// 清除  queryParams
const onClear = () => {
  queryParams.id= ''
  queryParams.orderStatus = ''
}

// 重置方法
const onReset = () => {
  onClear();
  getList();
}

// 分页
function handleSizeChange(val) {
  pageSize.value = val
  getList()
}

// 分页
function handleCurrentChange(val) {
  pageIndex.value = val
  getList(queryParams.id, queryParams.orderStatus)
}

</script>


<style scoped lang="less">
// 查询样式
.searchBar {
  :deep(.el-form-item) {
    width: 350px !important;
    margin-right: 20px;
    margin-bottom: 0;
  }
}
</style>